<template>
  <section class="table-section">
    <div class="section-header">
      <h2 class="section-title">
        <span class="title-icon">📊</span>
        数据表格
      </h2>
      <div class="section-actions">
        <button 
          class="refresh-btn"
          @click="handleRefresh"
          :disabled="loading"
        >
          <span class="refresh-icon" :class="{ 'is-loading': loading }">🔄</span>
          刷新数据
        </button>
      </div>
    </div>

    <!-- 请求信息显示 -->
    <div class="request-info-panel">
      <div class="panel-header">
        <h3 class="panel-title">
          <span class="panel-icon">🔧</span>
          模拟请求信息
        </h3>
        <div class="request-status" :class="`status-${requestInfo.status}`">
          <span class="status-indicator"></span>
          <span class="status-text">{{ getStatusText() }}</span>
        </div>
      </div>
      
      <div class="request-details">
        <RequestDetail
          label="请求 URL"
          :value="requestInfo.url"
          icon="🌐"
          type="url"
        />
        <RequestDetail
          label="请求方法"
          :value="requestInfo.method"
          icon="⚡"
          type="method"
        />
        <RequestDetail
          label="请求参数"
          :value="formatRequestParams()"
          icon="📋"
          type="json"
        />
      </div>
    </div>

    <!-- 表格容器 -->
    <div class="table-container">
      <div class="table-wrapper">
        <table class="data-table">
          <thead>
            <tr>
              <th class="th-id">ID</th>
              <th class="th-name">名称</th>
              <th class="th-category">分类</th>
              <th class="th-description">描述</th>
              <th class="th-time">创建时间</th>
              <th class="th-status">状态</th>
              <th class="th-actions">操作</th>
            </tr>
          </thead>
          <tbody>
            <!-- 加载状态 -->
            <tr v-if="loading" class="loading-row">
              <td colspan="7" class="loading-cell">
                <div class="loading-content">
                  <div class="loading-spinner"></div>
                  <span class="loading-text">数据加载中...</span>
                </div>
              </td>
            </tr>
            
            <!-- 空数据状态 -->
            <tr v-else-if="!tableData.length" class="empty-row">
              <td colspan="7" class="empty-cell">
                <div class="empty-content">
                  <div class="empty-icon">📭</div>
                  <div class="empty-title">暂无数据</div>
                  <div class="empty-hint">请选择筛选条件以加载数据</div>
                </div>
              </td>
            </tr>
            
            <!-- 数据行 -->
            <tr 
              v-else 
              v-for="item in tableData" 
              :key="item.id"
              class="data-row"
              @click="handleRowClick(item)"
            >
              <td class="td-id">
                <span class="id-badge">{{ item.id }}</span>
              </td>
              <td class="td-name">
                <div class="name-cell">
                  <span class="name-text">{{ item.name }}</span>
                  <span v-if="item.version" class="version-tag">{{ item.version }}</span>
                </div>
              </td>
              <td class="td-category">
                <span class="category-tag">{{ item.category }}</span>
              </td>
              <td class="td-description">
                <div class="description-cell" :title="item.description">
                  {{ item.description }}
                </div>
              </td>
              <td class="td-time">
                <div class="time-cell">
                  <div class="create-time">{{ formatDate(item.createTime) }}</div>
                  <div v-if="item.updateTime" class="update-time">
                    更新: {{ formatTime(item.updateTime) }}
                  </div>
                </div>
              </td>
              <td class="td-status">
                <StatusBadge :status="item.status" :text="item.statusText" />
              </td>
              <td class="td-actions">
                <div class="actions-cell">
                  <button 
                    class="action-btn view-btn" 
                    @click.stop="handleView(item)"
                    title="查看详情"
                  >
                    👁️
                  </button>
                  <button 
                    class="action-btn edit-btn" 
                    @click.stop="handleEdit(item)"
                    title="编辑"
                  >
                    ✏️
                  </button>
                  <button 
                    class="action-btn delete-btn" 
                    @click.stop="handleDelete(item)"
                    title="删除"
                  >
                    🗑️
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 表格统计信息 -->
    <div class="table-footer">
      <div class="table-stats">
        <span class="stats-text">
          共 {{ tableData.length }} 条记录
          <template v-if="requestInfo.params.category">
            (分类: {{ requestInfo.params.category }})
          </template>
        </span>
      </div>
      <div class="table-info">
        <span class="info-text">数据实时更新 • 点击行查看详情</span>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { toRefs } from 'vue'
import RequestDetail from './RequestDetail.vue'
import StatusBadge from './StatusBadge.vue'
import type { TableDataItem, RequestInfo, DataTableSectionProps } from '../types/app'

// Props
interface Props {
  tableData: TableDataItem[]
  loading: boolean
  requestInfo: RequestInfo
}

const props = defineProps<Props>()

// Emits
const emit = defineEmits<{
  refresh: []
}>()

// 解构 props
const { tableData, loading, requestInfo } = toRefs(props)

// 方法
const handleRefresh = (): void => {
  emit('refresh')
}

const getStatusText = (): string => {
  const statusMap = {
    loading: '🔄 请求中...',
    success: '✅ 请求成功',
    error: '❌ 请求失败'
  }
  return statusMap[requestInfo.value.status] || '未知状态'
}

const formatRequestParams = (): string => {
  return JSON.stringify(requestInfo.value.params, null, 2)
}

const formatDate = (dateStr: string): string => {
  const date = new Date(dateStr)
  return date.toLocaleDateString('zh-CN')
}

const formatTime = (timeStr: string): string => {
  const date = new Date(timeStr)
  return date.toLocaleTimeString('zh-CN', { 
    hour: '2-digit', 
    minute: '2-digit' 
  })
}

const handleRowClick = (item: TableDataItem): void => {
  console.log('行点击:', item)
  // 这里可以添加行点击逻辑，比如打开详情页
}

const handleView = (item: TableDataItem): void => {
  console.log('查看:', item)
  alert(`查看 ${item.name} 的详细信息`)
}

const handleEdit = (item: TableDataItem): void => {
  console.log('编辑:', item)
  alert(`编辑 ${item.name}`)
}

const handleDelete = (item: TableDataItem): void => {
  console.log('删除:', item)
  if (confirm(`确定要删除 ${item.name} 吗？`)) {
    alert('删除功能待实现')
  }
}
</script>

<style scoped>
.table-section {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border: 1px solid #e9ecef;
  margin-bottom: 24px;
  overflow: hidden;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px;
  border-bottom: 2px solid #f1f3f5;
  background: #f8f9fa;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: #2c3e50;
}

.title-icon {
  font-size: 1.5rem;
}

.section-actions {
  display: flex;
  gap: 12px;
}

.refresh-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.refresh-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.refresh-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.refresh-icon {
  font-size: 1rem;
  transition: transform 0.6s ease;
}

.refresh-icon.is-loading {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 请求信息面板 */
.request-info-panel {
  padding: 20px 32px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #374151;
}

.panel-icon {
  font-size: 1.2rem;
}

.request-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
}

.status-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.status-loading {
  background: #fef3c7;
  color: #92400e;
}

.status-loading .status-indicator {
  background: #f59e0b;
  animation: pulse 1.5s ease-in-out infinite;
}

.status-success {
  background: #d1fae5;
  color: #065f46;
}

.status-success .status-indicator {
  background: #10b981;
}

.status-error {
  background: #fee2e2;
  color: #991b1b;
}

.status-error .status-indicator {
  background: #ef4444;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.request-details {
  display: grid;
  gap: 12px;
}

/* 表格样式 */
.table-container {
  overflow: hidden;
}

.table-wrapper {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.data-table th {
  background: #f8fafc;
  color: #374151;
  font-weight: 600;
  padding: 16px 12px;
  text-align: left;
  border-bottom: 2px solid #e5e7eb;
  white-space: nowrap;
}

.data-table td {
  padding: 12px;
  border-bottom: 1px solid #f1f3f5;
  vertical-align: top;
}

.data-row {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.data-row:hover {
  background-color: #f9fafb;
}

/* 特定列样式 */
.td-id {
  width: 80px;
}

.id-badge {
  display: inline-block;
  padding: 4px 8px;
  background: #e5e7eb;
  color: #374151;
  border-radius: 4px;
  font-weight: 500;
  font-size: 0.8rem;
}

.name-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.name-text {
  font-weight: 600;
  color: #1f2937;
}

.version-tag {
  font-size: 0.75rem;
  color: #6b7280;
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 3px;
  align-self: flex-start;
}

.category-tag {
  display: inline-block;
  padding: 4px 8px;
  background: #dbeafe;
  color: #1e40af;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
}

.description-cell {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #6b7280;
  line-height: 1.4;
}

.time-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.create-time {
  font-weight: 500;
  color: #374151;
}

.update-time {
  font-size: 0.75rem;
  color: #9ca3af;
}

.actions-cell {
  display: flex;
  gap: 4px;
}

.action-btn {
  padding: 4px 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.9rem;
  transition: background-color 0.2s ease;
}

.action-btn:hover {
  background: #f3f4f6;
}

/* 加载和空状态 */
.loading-cell, .empty-cell {
  text-align: center;
  padding: 60px 20px !important;
}

.loading-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #6b7280;
}

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-text {
  font-size: 0.95rem;
}

.empty-content {
  color: #9ca3af;
}

.empty-icon {
  font-size: 3rem;
  margin-bottom: 12px;
  opacity: 0.6;
}

.empty-title {
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 6px;
  color: #6b7280;
}

.empty-hint {
  font-size: 0.9rem;
}

/* 表格底部 */
.table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
  font-size: 0.85rem;
}

.stats-text {
  color: #374151;
  font-weight: 500;
}

.info-text {
  color: #6b7280;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .section-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  
  .table-container {
    margin: 0 -32px;
  }
  
  .table-footer {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  
  .request-info-panel {
    padding: 16px 20px;
  }
  
  .panel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}
</style>
